<template>
  <div>

    
      <div class="sq_box" v-if="lxwm">
        <div
          class="layui-layer-shade"
          @click="gblxwm"
          style="width:100%;height:100%; z-index:99999999; background-color:#000; opacity:0.65; filter:alpha(opacity=65); position: fixed; top:0;left:0"
        ></div>

        <div
          class="layui-layer layui-layer-page layer-anim"
          style="z-index: 9999999999;
    width: 1000px;
    height: 600px;
    top: 50%;
    left: 50%;
    position: fixed;
    margin: -350px 0 0 -500px;"
          v-if="lxwm"
        >
          <div id class="layui-layer-content" style="height: 570px;">
            <div
              class="registerMain layui-layer-wrap"
              id="addapi"
              style="display: block;background: #ffffff;"
            >
              <div class="regDiv">
                <div class="xTitle">
                  <h4 class="emailTitle">联系我们</h4>
                  <a class="closeA" href="javascript:;" @click="gblxwm">×</a>
                </div>

<div class="jlx">
  <div class="jlx_l">
      <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
            <!--缩放-->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
            <!--定位-->
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <!--点-->
            <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">
                <!--提示信息-->
                <bm-info-window :show="map.show">扬州航盛科技有限公司</br>扬州市经济开发区扬子江中路186号智谷大厦</bm-info-window>
            </bm-marker>
        </baidu-map>
  </div>
    <div class="jlx_r">
<div id="section1" class="width1200 contact-section clearfix" style="height: 220px; ">
                
                    <h3>客服&售后服务</h3>
                    <p class="des-p">服务时间：工作日 9:00 ~ 18:00</p>
                    <p class="des-p">服务电话：<a href="tel://xiebin@hangsheng.com.cn">0514-85828822</a></p>
                    <p class="des-p">服务邮箱：<a href="mailto://xiebin@hangsheng.com.cn">xiebin@hangsheng.com.cn</a></p>
                    <p class="des-p des-p3" style="top: 20px">若您在使用我们的服务时遇到问题，您可以寻求帮助，我们专业的工程师团队将为您提供技术服务。</p>
                 
                </div>

                <div id="section4" class="width1200 contact-section clearfix" style="border:0;">

                    <h3>联系地址</h3>
                    <p class="des-p">欢迎随时与我们取得联系</p>
                    <dl>
                        <dt>
                          
                            <span>扬州航盛科技有限公司</span>
                        </dt>
                        <dd>扬州市经济开发区扬子江中路186号智谷大厦</dd>
                    </dl>
                </div>
  </div>
</div>
                


              </div>
            </div>
          </div>
          <span class="layui-layer-setwin"></span>
          <span class="layui-layer-resize"></span>
        </div>
        
      </div>



    <div class="c-section c-p-y-tall sol-case-list" v-if="khxs">
      <div class="c-section-inner">
        <!-- 标题块 -->
        <div class="c-section-hd">
          <h3 class="c-section-tit">他们也在使用航盛聚合数据</h3>
          <p class="c-section-des">航盛提供汽车行业全业务数字化解决方案</p>
        </div>
        <!-- 标题组件e -->
        <div class="c-section-bd">
          <div class="c-clients-list">
            <div id="div1">
         <div id="div4">
             <div id="div2">
                 <img
                alt="一汽"
                src="https://main.qcloudimg.com/raw/8c7c5281aa4fa1ba2dbdf675e862775b.png"
              />
                <img
                alt="东风"
                src="https://main.qcloudimg.com/raw/5315fad49ef56eb7038d0b6dbda6838f.png"
              />
                 <img
                alt="上汽"
                src="https://main.qcloudimg.com/raw/320f192a2c4ccf2efc8027edd00bfa9a.png"
              />
               <img
                alt="上汽大众"
                src="https://main.qcloudimg.com/raw/ded0d343cc823b2226fc99689beafe5a.png"
              />
                <img
                alt="上汽通用"
                src="https://main.qcloudimg.com/raw/16b7b1b2c6c4760220b8c0e75bd2537f.png"
              />
                <img
                alt="东风柳汽"
                src="https://main.qcloudimg.com/raw/6c91cfdda33d20f2e977d84f7510ede4.png"
              /> <img
                alt="东风日产"
                src="../../assets/images/dfrc.png"
              /><img
                alt="观致汽车"
                src="../../assets/images/gz.png"
              />
            </div>
            <div id="div3"></div><!--这个容器是用来防止图片滚动时会出现空白的区域-->
        </div>
    </div>
         


<!-- 
            <div class="c-clients-item">
              <img
                alt="FCA"
                src="https://main.qcloudimg.com/raw/47802d5bfe2950f9c9c5853aac5f7abb.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="BMW"
                src="https://main.qcloudimg.com/raw/2dc9cbd755c0b2e9cacb411f83ccaa95.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="广汽"
                src="https://main.qcloudimg.com/raw/677d9e6b96c1999cc2fae31d8c65e062.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="一汽"
                src="https://main.qcloudimg.com/raw/8c7c5281aa4fa1ba2dbdf675e862775b.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="东风"
                src="https://main.qcloudimg.com/raw/5315fad49ef56eb7038d0b6dbda6838f.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="长安"
                src="https://main.qcloudimg.com/raw/464ebad16412c606d5a37495de2054d8.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="上汽"
                src="https://main.qcloudimg.com/raw/320f192a2c4ccf2efc8027edd00bfa9a.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="北汽"
                src="https://main.qcloudimg.com/raw/9882ffc4e87d8c28f6311e4a39ce8a84.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="一汽大众"
                src="https://main.qcloudimg.com/raw/87b1d625e5387320836cb470da45bdf3.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="上汽大众"
                src="https://main.qcloudimg.com/raw/ded0d343cc823b2226fc99689beafe5a.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="上汽通用"
                src="https://main.qcloudimg.com/raw/16b7b1b2c6c4760220b8c0e75bd2537f.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="东风柳汽"
                src="https://main.qcloudimg.com/raw/6c91cfdda33d20f2e977d84f7510ede4.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="广汽如祺"
                src="https://main.qcloudimg.com/raw/d2cac39915998ab45f8988936c357a11.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="吉利汽车"
                src="https://main.qcloudimg.com/raw/871c4d9b2e342063daefe21f6e615aff.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="蔚来汽车"
                src="https://main.qcloudimg.com/raw/aec7c51b1b99aca1f2f6370cb279f9e2.png"
              />
            </div>
            <div class="c-clients-item">
              <img
                alt="威马汽车"
                src="https://main.qcloudimg.com/raw/b3ac757f22c4e00f488ec14491d2eb45.png"
              />
            </div> -->


          </div>
        </div>
        
      </div>
    </div>

    <div class="c-section c-p-y-tall sol-contact sol-contact-has-bg" data-mod="connectUs">
      <div class="c-section-inner">
        <a class="anchor" id="connectUs">&nbsp;</a>
        <!-- 内容块 -->
        <div class="c-section-bd clearfix">
          <div class="sol-contact-inner">
            <div class="sol-contact-box">
              <div class="sol-contact-hd">
                <h2 class="sol-contact-tit J-sltSectionTitle">加入航盛聚合平台</h2>
              </div>
              <div class="sol-contact-bd">
                <p class="sol-contact-desc">关于使用场景和技术架构的更多咨询， 请联系我们的销售和技术支持团队。</p>
              </div>
              <div class="sol-contact-ft">
                <div class="sol-contact-btn">
                  <a
                    role="button"
                    href="javascript:;"
                    class="c-btn" @click="xslxwm()"
                  >联系我们</a>
                </div>
              </div>
            </div>
          </div>
          <div class="sol-contact-bg"></div>
        </div>
      </div>
    </div>

    <div id="contactwidget">
      <ul>
        <li id="wgqq">
          <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes">QQ</a>
          <div id="wgqqbotline"></div>
        </li>
        <li id="wgwx">
          <a href="javascript:;">微信</a>
          <div class="wgbox">
            <img src="../../assets/images/qrcode200.jpg" height="105" alt="极速微信" />
          </div>
        </li>
        <li id="wgtop" v-show="gotop" @click="toTop">
          <a href="javascript:;">TOP</a>
        </li>
      </ul>
    </div>

    <div id="foot" class="mtop15">
      <div class="wid">
        <div id="footleft"></div>
        <div id="footcenter">
          <div class="footitem">
            <h3>首页</h3>
            <ul>
              <li>
                <a href>所有API</a>
              </li>
            </ul>
          </div>
          <div class="footitem">
            <h3>关于</h3>
            <ul>
              <li>
                <a href rel="nofollow">航盛聚合数据</a>
              </li>
              <li>
                <a href rel="nofollow">联系我们</a>
              </li>
            </ul>
          </div>
        </div>
        <div id="footright">
          <div class="footitem">
            <h3>联系我们</h3>
            <div id="telbox">
              <div class="tel">0514-85828822</div>
              <div>
                邮箱：
                <a href="mailto://xiebin@hangsheng.com.cn">xiebin@hangsheng.com.cn</a>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <p class="clear">&#169; 2017 扬州航盛科技有限公司 版权所有 苏ICP备23423423号</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "Footer",
  data() {
    return {
      gotop: false,
       map:{
                center: {lng: 119.423925, lat: 32.366681},
                zoom: 17,
                show: true,
                dragging: true
            },
    };
  },
 props: ["khxs","lxwm"],
  components: {},
  mounted() {

    // 此处true需要加上，不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.handleScroll, true);


    window.onload=function(){
          var v1=document.getElementById('div1');
          var v2=document.getElementById('div2');
          var v3=document.getElementById('div3');

          v3.innerHTML= v2.innerHTML;
          function fun(){
            if(v1.scrollLeft<=0){
                v1.scrollLeft=1180;
            }else{
                v1.scrollLeft--;
            }
        }

        var fun1=setInterval(fun,10);

        v1.onmouseover = function() {//鼠标经过时  清除定时器  停止图片的滚动
                clearInterval(fun1)
            };
        v1.onmouseout = function() {//鼠标离开后  继续滚动图片
                fun1 = setInterval(fun, 10)
            };
    }


  },
  methods: {
     handler ({BMap, map}) {
                let me = this;
                console.log(BMap, map)
                // 鼠标缩放
                map.enableScrollWheelZoom(true);
                // 点击事件获取经纬度
                map.addEventListener('click', function (e) {
                    console.log(e.point.lng, e.point.lat)
                })
            },
  
    gblxwm: function() {
               this.$emit('gblxwm');
      // this.lxwm = false;
    },
    xslxwm: function() {
       this.$emit('xslxwm');
      // this.lxwm = true;
    },

    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.c-section.c-p-y-tall {
  padding: 45px 10px 50px;
  margin-bottom: -70px;
}
.c-section-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0 10px;
}
.c-section-hd {
  margin-bottom: 30px;
}
.c-section-tit {
  text-align: center;
  text-align: center;
  font-size: 32px;
  color: #000;
  font-weight: 400;
  line-height: 46px;
  font-size: 24px;
}
.c-section-des {
  text-align: center;
  text-align: center;
  font-size: 16px;
  color: #666;
  margin: 16px 0 0;
  line-height: 28px;
  font-size: 16px;
}
.c-clients-list {
  font-size: 0;
}
.c-clients-list .c-clients-item {
  margin-bottom: 50px;
  padding: 0 3.603%;
  width: 25%;
  max-height: 64px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
}
.c-clients-list img {
  max-height: 50px;
}

.sol-contact {
  position: relative;
  text-align: center;
  overflow: hidden;
  position: relative;
  padding: 88px 0 100px;
}
.c-section-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0 10px;
}
a.anchor {
  position: absolute;
  top: -50px;
}
.sol-contact-inner {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.sol-contact-tit {
  line-height: 42px;
  font-size: 30px;
  color: #000;
  font-weight: 400;
}
.sol-contact-bd {
  margin-top: 20px;
}
.sol-contact-desc {
  line-height: 27px;
  font-size: 16px;
  color: #666;
  word-break: break-all;
}
.sol-contact-ft {
  margin-top: 30px;
}

.c-btn {
  height: 35px;
  min-width: 140px;
  padding: 0 20px;
  background-color: #00a4ff;
  color: #fff;
  font-size: 14px;
  line-height: 35px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.sol-contact-btn .c-btn {
  min-width: 160px;
}

.sol-contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
}
.c-section.sol-contact-has-bg .sol-contact-bg {
  background: url(../../assets/images/contact-bg.jpg) top center no-repeat #fff;
  background-size: cover;
}

.sol-contact-hd h2:before {
  content: none;
}

   #div1 img{
            float:left;
            height:50px;
             width:164px;
        }
       #div1{
           width:100%;
             height:150px;
          overflow: hidden;
        }
       #div2,#div3{
            float:left;
        }
       #div4{
        width:500%;/*这个属性很重要 让容器有足够的宽度实现滚动*/
             float:left;
        }
.jlx{ width: 100%; height: auto; display: block; float: left;}
.jlx_l{ width:61%; height: auto; display: block; float: left;margin:20px 2%;;}
.jlx_r{ width:28%; height: auto; display: block; float: left;}

.contact-section {
    padding: 20px 0 0px 20px;
    width: 100%;
    border-bottom: 1px solid #eee;
}
.contact-section h3 {
    font-size: 30px;
    color: #333;
    line-height: 60px;
    font-weight: 400;
    padding-top: 8px;
    position: relative;
}
.contact-section .des-p {
    color: #999;
    line-height: 20px;
    font-size: 14px;
}
.contact-section .des-p {
    color: #999;
    line-height: 20px;
    font-size: 14px;
}
#section1 .des-p3 {
    position: relative;
    top: 300px;
    font-size: 12px;
}
#section4 dl {
    width: 100%;
    padding-top: 20px;
}
#section4 dl dt {
    line-height: 30px;
    padding-bottom: 6px;
    font-size: 16px;
    color: #333;
}
#section4 dl dt {
    line-height: 30px;
    padding-bottom: 6px;
    font-size: 16px;
    color: #333;
}
#section4 dl dd {
    line-height: 24px;
    // border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
    margin-bottom: 3px;
}
.map{width: 610px; height: 500px;}
</style>